<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="boot-strap/node_modules/bootstrap/dist/css/bootstrap.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        html,body{
            width: 100%;
            height: 150%;
        }
        .box {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .left {
            background-color: rgb(55, 65, 87);
            height: 100%;
            width: 20%;
            float: left;
        }
        .right {
            height: 100%;
            width: 80%;
            float: left;
            background-color: rgba(156, 177, 178, 0.5);
        }
        .left>div{
            width: 100%;
            height: 50px;
            color: white;
            font-size: 16px;
            text-align: center;
            line-height: 50px;
        }
        .left>div:hover{
            background-color: #2b6695;
        }
        .table {
            width: 90%;
            border:1px solid rgb(205, 205, 217);
            margin: 20px auto;
            display: none;
        }
        button{
            height: 20px;
            font-size: 10px;
            padding: 2px 10px;
            margin-left: 10px;
            float: left;
        }
        .form-horizontal {
            display: none;
            margin-top: 70px;
        }
        .ga {
            position: absolute;
            top: 30%;
            left: 40%;
            width: 150px;
            display: none;
        }
        #imgWrapper {
            width: 100px;
            height: 100px;
            border: 1px dotted gray;
            border-radius: 10px;
        }
        #per1{
            width: 98px;
            height: 98px;
            margin-left: -16px;
        }
        #imgWrapper2 {
            width: 100px;
            height: 100px;
            border: 1px dotted gray;
            border-radius: 10px;
        }
        #per2{
            width: 98px;
            height: 98px;
            margin-left: -16px;
        }
        #imgWrapper3 {
            width: 100px;
            height: 100px;
            border: 1px dotted gray;
            border-radius: 10px;
        }
        #per3{
            width: 98px;
            height: 98px;
            margin-left: -16px;
        }
        #imgWrapper4 {
            width: 100px;
            height: 100px;
            border: 1px dotted gray;
            border-radius: 10px;
        }
        #per4{
            width: 98px;
            height: 98px;
            margin-left: -16px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <div class="storeStr">商家列表</div>
            <div class="foodStr">食品列表</div>
            <div class="manager">管理员列表</div>
            <div class="store">添加商铺</div>
            <div class="food">添加商品</div>
        </div>
        <div class="right">
            <!--//管理员界面-->
            <table class="table table-hover f1">
                <thead>
                    <tr class="active">
                        <th>姓名</th>
                        <th>注册日期</th>
                        <th>权限</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <!--店铺界面-->
            <table class="table table-hover f2">
                <thead>
                <tr class="active">
                    <td>店铺名称</td>
                    <td>店铺地址</td>
                    <td>店铺介绍</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <!--食品界面-->
            <table class="table table-hover f3">
                <thead>
                <tr class="active">
                    <td>食品名称</td>
                    <td>食品价格</td>
                    <td>食品介绍</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <!--添加商铺-->
            <form class="form-horizontal f4">
                <div class="form-group">
                    <label class="col-sm-2 control-label">店铺名称</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control sn"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">详细地址</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control sa"  placeholder="请输入地址">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">联系电话</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control st"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">起送价</label>
                    <div class="col-sm-4">
                        <input type="number" value="20" min="10" class="form-control startm">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">配送费</label>
                    <div class="col-sm-4">
                        <input type="number" value="5" min="0" class="form-control lit"  placeholder="5">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">营业时间</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control sd1"  placeholder="起始时间">
                    </div>
                    <div class="col-sm-4">
                        <input type="text" class="form-control sd2"  placeholder="结束时间">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">店铺头像</label>

                    <div class="pic3 col-sm-4">
                        <input type="file" class="form-control" id="img1">
                    </div>
                    <div class="col-sm-2">
                    <button type="button" id="btn1">上传图片</button>
                    </div>
                    <div id="imgWrapper" class="col-sm-2">
                        <img src="" alt="" id="per1" class="img-rounded">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary btn-lg" id="btn2" style="font-size: 12px;">创建</button>
                    </div>
                </div>
            </form>
            <!--添加食品-->
            <form class="form-horizontal f5">
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品名称</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control fn"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">价格</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control fp"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品介绍</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control fi"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品评分</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control fg"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品图片</label>

                    <div class="pic3 col-sm-4">
                        <input type="file" class="form-control" id="img2">
                    </div>
                    <div class="col-sm-2">
                    <button type="button" id="btn11">上传图片</button>
                    </div>
                    <div id="imgWrapper2" class="col-sm-2">
                        <img src="" alt="" id="per2" class="img-rounded">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary btn-lg" id="btn3" style="font-size: 12px">确认</button>
                    </div>
                </div>
            </form>
            <!--修改商铺-->
            <form class="form-horizontal f6">
                <div class="form-group">
                    <p style="font-size: 20px;margin-left: 100px">修改店铺信息</p>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">店铺名称</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control sn2"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">详细地址</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control sa2"  placeholder="请输入地址">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">联系电话</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control st2"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品图片</label>

                    <div class="pic3 col-sm-4">
                        <input type="file" class="form-control" id="img3">
                    </div>
                    <div class="col-sm-2">
                    <button type="button" id="btns">上传图片</button>
                    </div>
                    <div id="imgWrapper3" class="col-sm-2">
                        <img src="" alt="" id="per3" class="img-rounded">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                        <button type="button" class="btn btn-primary btn-lg" id="btn14" style="font-size: 12px">取消</button>
                        <button type="button" class="btn btn-primary btn-lg" id="btn4" style="font-size: 12px">确定</button>

                </div>
            </form>
            <form class="form-horizontal f7">
                <div class="form-group">
                    <p style="font-size: 20px;margin-left: 100px">修改食品信息</p>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品名称</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control fn2"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品价格</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control fp2"  placeholder="请输入地址">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品介绍</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control fi2"  placeholder="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">食品图片</label>

                    <div class="pic3 col-sm-4">
                        <input type="file" class="form-control" id="img33">
                    </div>
                    <div class="col-sm-2">
                    <button type="button" id="btnss">上传图片</button>
                    </div>
                    <div id="imgWrapper4" class="col-sm-2">
                        <img src="" alt="" id="per4" class="img-rounded">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label"></label>
                        <button type="button" class="btn btn-primary btn-lg" id="btn24" style="font-size: 12px">取消</button>
                        <button type="button" class="btn btn-primary btn-lg" id="btn34" style="font-size: 12px">确定</button>

                </div>
            </form>
        </div>

        <div class="alert alert-success alert-warning ga" role="alert">
            请先选择商铺
            <button type="button" class="btn btn-primary" id="btn7" style="font-size: 12px">确定</button>
        </div>

    </div>

    <script>
        $(".left div").click(function () {
            let myThis = this;
            $(".left div").each(function(i, v) {
                if(myThis == v) {
                        $(".left div").css("color","white");
                        switch($(v).html()) {
                            case "商家列表": {
                                $("table").css("display","none");
                                $(".form-horizontal").css("display","none");
                                $(".f2").css("display","table");
                                break;
                            }
                            case "管理员列表": {
                                $("table").css("display","none");
                                $(".form-horizontal").css("display","none");
                                $(".f1").css("display","table");
                                break;
                            }
                            case "食品列表": {
                                $("table").css("display","none");
                                $(".form-horizontal").css("display","none");
                                $(".f3").css("display","table");
                                break;
                            }
                            case "添加商品": {
                                $("table").css("display","none");
                                $(".form-horizontal").css("display","none");
                                $(".f5").css("display","block");
                                $(".ga").css("display","block");
                                break;
                            }
                            case "添加商铺": {
                                $("table").css("display","none");
                                $(".form-horizontal").css("display","none");
                                $(".f4").css("display","block");
                                break;
                            }
                        }
                }
            })
        });



        $(function () {
            //获取登录人员信息
            $.ajax({
                url: "http://127.0.0.1:1818/getUser",
                type: "get",
                success: function (data) {
                    if (Array.isArray(data)) {
                        data.forEach(function (v, i) {
                            let tr = $("<tr/>").appendTo($(".f1 tbody"));
                            $("<td/>").html(v.name).appendTo(tr);
                            $("<td/>").html(v.date).appendTo(tr);
                            $("<td/>").html("管理员").appendTo(tr);
                        });
                    }
                }
            });




            $("#btn2").click(function () {
                $.ajax({
                    url:"http://127.0.0.1:1818/store",
                    type:"post",
                    data:{
                        storename:$(".sn").val(),
                        storeaddress:$(".sa").val(),
                        storeNumber:$(".st").val(),
                        litmoney:$(".lit").val(),
                        startmoney:$(".startm").val()
                    },
                    success:function (data) {
                        console.log(data);
                    }
                });
            });


            $("#btn3").click(function () {
                $.ajax({
                    url:"http://127.0.0.1:1818/food",
                    type:"post",
                    data:{
                        foodname:$(".fn").val(),
                        foodprice:$(".fp").val(),
                        foodinfo:$(".fi").val(),
                        foodnum:$(".fg").val(),
                    },
                    success:function (data) {
                        console.log(data);
                    }
                });
            });

            $.ajax({
                url: "http://127.0.0.1:1818/getStore",
                type: "get",
                success: function (data) {
                    // console.log(data)
                    if (Array.isArray(data)) {
                        data.forEach(function (v, i) {
                            // console.log(v)
                            let tr = $("<tr/>").appendTo($(".f2 tbody"));
                            $("<td/>").html(v.storename).appendTo(tr);
                            $("<td/>").html(v.storeaddress).appendTo(tr);
                            $("<td>").html(v.startmoney + "元起送").appendTo(tr);
                            let td = $("<td/>").appendTo(tr);
                            let btn01 = $("<button>").html("编辑").appendTo(td);
                            let btn02 = $("<button>").html("添加食品").appendTo(td);
                            let btn03 = $("<button>").html("删除").appendTo(td);

                            // 修改店铺信息
                            btn01.click(function () {
                                $(".f6").css("display", "block");
                                $(".sn2").val(v.storename);
                                $(".sa2").val(v.storeaddress);
                                $("#per3").prop("src", v.pictures);
                                $(".st2").val(v.storeNumber);
                                $("#btn4").click(function () {
                                    $.ajax({
                                        url: "http://127.0.0.1:1818/updatestore",
                                        type: "post",
                                        data: {
                                            id: v._id,
                                            storename: $(".sn2").val(),
                                            storeaddress: $(".sa2").val(),
                                            storeNumber: $(".st2").val(),
                                            pictures: $(".pic").prop("src")
                                        },
                                        success: function (data) {
                                            console.log(data)
                                        }
                                    })
                                });
                                $("#btn14").click(function () {
                                    $(".f6").css("display", "none");
                                });
                            });


                            btn02.on("click", function () {
                                $("table").css("display", "none");
                                $(".form-horizontal").css("display", "none");
                                $(".f5").css("display", "block");
                                $(".ga").css("display", "none");
                                $(".left div").css({
                                    color:"white",
                                    backgroundColor:"rgb(55, 65, 87)"
                                });
                                localStorage.sId = v._id;
                            });




                            btn03.click(function () {
                                $.ajax({
                                    url: "http://127.0.0.1:1818/deletestore",
                                    type: "post",
                                    data: {
                                        id: v._id
                                    },
                                    success: function (data) {
                                        btn03.parent().parent().remove();
                                    }
                                })
                            })
                        });
                    }
                }
            });


            //获取食品数据
            $.ajax({
                url:"http://127.0.0.1:1818/getFood",
                type:"get",
                success:function (data) {
                    if(Array.isArray(data)){
                        // console.log(data)
                        data.forEach(function (v, i) {
                            console.log(v);
                            let tr = $("<tr/>").appendTo($(".f3 tbody"));
                            $("<td/>").html(v.foodname).appendTo(tr);
                            $("<td/>").html(v.foodprice).appendTo(tr);
                            $("<td/>").html(v.foodinfo).appendTo(tr);
                            let tds = $("<td/>").appendTo(tr);
                            let btn04 = $("<button>").html("编辑").appendTo(tds);
                            let btn05 = $("<button>").html("删除").appendTo(tds);


                            btn04.click(function () {
                                $(".f7").css("display", "block");
                                $(".fn2").val(v.foodname);
                                $(".fp2").val(v.foodprice);
                                $("#per4").prop("src", v.pictures);
                                $(".fi2").val(v.foodinfo);
                                $("#btn34").click(function () {
                                    $.ajax({
                                        url: "http://127.0.0.1:1818/updatefood",
                                        type: "post",
                                        data: {
                                            id: v._id,
                                            foodname: $(".fn2").val(),
                                            foodprice: $(".fp2").val(),
                                            foodinfo: $(".fi2").val(),
                                            pictures: $(".pic2").prop("src")
                                        },
                                        success: function (data) {
                                            console.log(data)
                                        }
                                    })
                                });
                                $("#btn24").click(function () {
                                    $(".f7").css("display", "none");
                                });
                            });


                            btn05.click(function () {
                                $.ajax({
                                    url: "http://127.0.0.1:1818/deletefood",
                                    type: "post",
                                    data: {
                                        id: v._id
                                    },
                                    success: function (data) {
                                        btn05.parent().parent().remove();
                                    }
                                })
                            })
                        });
                    }
                }
            });
            $(".f1").css("display","table");
        })



        $("#btn1").click(function () {
            let formData = new FormData();
            let uploadInputE = document.getElementById("img1");
            if(!/^image\/(png|jpg|jpeg|gif|ico)$/.test(uploadInputE.files[0].type)){
                alert("请选择图片文件");
                return;
            }
            formData.append("my_file", uploadInputE.files[0]);
            $.ajax({
                url:"http://127.0.0.1:1818/uploadF",
                type:"post",
                contentType:false,
                processData:false,
                async:true,
                data:formData,
                success:function (data) {
                    console.log(data);
                    if(data.msg == "ok") {
                        console.log(data.img_src)
                        $("#per1").prop("src",data.img_src);
                    }else {
                        alert("文件上传失败");
                    }
                }
            });
        });

        $("#btn11").click(function () {
            let formData = new FormData();
            let uploadInputE = document.getElementById("img2");
            if(!/^image\/(png|jpg|jpeg|gif|ico)$/.test(uploadInputE.files[0].type)){
                alert("请选择图片文件");
                return;
            }
            formData.append("my_file", uploadInputE.files[0]);
            $.ajax({
                url:"http://127.0.0.1:1818/uploadF2",
                type:"post",
                contentType:false,
                processData:false,
                async:true,
                data:formData,
                success:function (data) {
                    console.log(data);
                    if(data.msg == "ok") {
                        console.log(data.img_src)
                        $("#per2").prop("src",data.img_src);
                    }else {
                        alert("文件上传失败");
                    }
                }
            });
        });


        $("#btns").click(function () {
            let formData = new FormData();
            let uploadInputE = document.getElementById("img3");
            if(!/^image\/(png|jpg|jpeg|gif|ico)$/.test(uploadInputE.files[0].type)){
                alert("请选择图片文件");
                return;
            }
            formData.append("my_file", uploadInputE.files[0]);
            $.ajax({
                url:"http://127.0.0.1:1818/uploadF",
                type:"post",
                contentType:false,
                processData:false,
                async:true,
                data:formData,
                success:function (data) {
                    console.log(data);
                    if(data.msg == "ok") {
                        console.log(data.img_src)
                        $("#per3").prop("src",data.img_src);
                    }else {
                        alert("文件上传失败");
                    }
                }
            });
        });


        $("#btnss").click(function () {
            let formData = new FormData();
            let uploadInputE = document.getElementById("img33");
            if(!/^image\/(png|jpg|jpeg|gif|ico)$/.test(uploadInputE.files[0].type)){
                alert("请选择图片文件");
                return;
            }
            formData.append("my_file", uploadInputE.files[0]);
            $.ajax({
                url:"http://127.0.0.1:1818/uploadF2",
                type:"post",
                contentType:false,
                processData:false,
                async:true,
                data:formData,
                success:function (data) {
                    console.log(data);
                    if(data.msg == "ok") {
                        console.log(data.img_src)
                        $("#per4").prop("src",data.img_src);
                    }else {
                        alert("文件上传失败");
                    }
                }
            });
        });



        $("#btn7").click(function () {
            $("table").css("display","none");
            $(".form-horizontal").css("display","none");
            $(".f2").css("display","table");
            $(".ga").css("display","none");
            $(".left div").css("color","white");
            $(".left div:eq(1)").css("color","white");
        });

    </script>
</body>
</html>